<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax 封装</title>
</head>
<body>
    <button class="get">GET 请求数据</button>
    <button class="post">post 请求数据</button>
    

    <script>
        // ajax  封装
        // promise 铺垫  
        var getbtn = document.getElementsByClassName("get")[0];
        var postbtn = document.getElementsByClassName("post")[0];
        
        // get请求 
        getbtn.onclick = function(){
            // var xhr = new XMLHttpRequest();
            // xhr.open("get","../php/isExistUser.php?user=yoyo1",true)
            // xhr.send()
            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState==4 && xhr.status ==200){
            //         var result = JSON.parse(xhr.responseText);
            //         console.log(result)
            //     }
            // }
            get("../php/isExistUser.php",'user=yoyo1',true,'json',function(data){
                // data = result  形参 接收请求成功时候返回的数据  (文本 json 对象数组 html)
                // 把函数作为参数传递给另一个函数中  让它在另一个函数中执行  请求成功的回调 
                console.log("请求成功")
                console.log(data)
            })

            // 缺点 (多参数传递  一一对应)  options 
            // 1. 参数不能换位置
            // 2. 参数不能省略 
        }
        
        // url 地址
        // data 参数 
        // async 异步请求
        // dataType 返回数据格式  text 文本  不需要格式化  json 字符串的json 需要 JSON.parse 
        // success  回调函数  异步 通过回调函数
        // 把函数作为参数传递给另一个函数中  让它在另一个函数中执行  请求成功的回调 
        function get(url,data,async=true,dataType="text",success){
            var xhr = new XMLHttpRequest();
            xhr.open("get",url+'?'+data,async)
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    // var result = JSON.parse(xhr.responseText);  不一定所有的返回数据都是 json
                    var result = xhr.responseText;
                    if(dataType=="json"){
                        result = JSON.parse(result);
                    }
                    // console.log(result)

                    // success 回调函数   
                    // 根据后台返回的数据的内容进行判断 是否操作成功  
                    // 登录接口  成功/失败   进入主页/ 重新登录
                    // 删除接口  成功/失败   页面删除/ 提示删除失败
                    // 一对多 以不变应万变 
                    if(success){
                        success(result)    // 把result 暴露给调用的环境 
                    }
                    
                    // const {status,detail} =  result;
                    // if(status){
                    //     // 修改成功
                    //     loadGrade()
                    //     editmodal.style.display = "none";
                    // }
                }
            }
        }
        
        // post 请求 
        postbtn.onclick = function(){
            var user = "heelo"
            var pass = "aa"

            var xhr = new XMLHttpRequest();
            xhr.open("post","../php/login.php",true)
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pass=${pass}`);
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    var result = JSON.parse(xhr.responseText);
                    console.log(result)
                }
            }
        }

        // 
    </script>
</body>
</html>